<template lang="pug">
.page-audio.app-container
  #audio-main(v-show="state.isShow")
</template>

<script setup>
import 'xgplayer'
import Music from 'xgplayer-music'
import { reactive, getCurrentInstance, onUnmounted } from 'vue'
const { proxy } = getCurrentInstance() // 内部组件实例
const state = reactive({
  player: '',
  isShow: false
})
proxy.$nextTick(() => {
  state.player = new Music({
    id: 'audio-main',
    url: [
      { src: 'http://oss.linxiaming.cn/audio/20210714/mp.mp3', name: '嚣张', vid: '01', poster: loginBg },
      { src: 'http://oss.linxiaming.cn/audio/20210714/01.mp3', name: '我的', vid: '01', poster: loginBg }
    ]
  })

  state.player.once('ready', () => { state.isShow = true })
})

onUnmounted(() => {
  // 销毁播发器
  state.player.destroy()
})
</script>

<style lang="scss">
  .page-audio {
    #audio-main {
      width: 100%;
      max-width: 600px;
      height: 50px;
    }
  }
</style>
